<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<!--<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">-->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Open_Sans_400.font.js" type="text/javascript"></script>
<script src="js/Open_Sans_Light_300.font.js" type="text/javascript"></script> 
<script src="js/Open_Sans_Semibold_600.font.js" type="text/javascript"></script>  
<script type="text/javascript" src="js/tms-0.3.js"></script>
<script type="text/javascript" src="js/tms_presets.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
<script src="js/FF-cash.js" type="text/javascript"></script>
<!--[if lt IE 7]>
	<div style=' clear: both; text-align:center; position: relative;'>
		<a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/images/upgrade.jpg" border="0"  alt="" /></a>
	</div>
<![endif]-->
<!--[if lt IE 9]>
	<script type="text/javascript" src="js/html5.js"></script>
	<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
<![endif]-->
</head>
<body id="page1">
<!-- header -->
	<div class="bg">
		<div class="main">
			<header>
				<div class="row-1">
					<h1>
						<a class="logo" href="index.html">HMIF</a>
						<strong class="slog">The little things that you learn, the most valuable things for HMIF</strong>
					</h1>
					<form id="search-form" action="" method="post" enctype="multipart/form-data">
						<fieldset>
							<div class="search-form">					
								<input type="text" name="search" value="Type Keyword Here" onBlur="if(this.value=='') this.value='Type Keyword Here'" onFocus="if(this.value =='Type Keyword Here' ) this.value=''" />
								<a href="#" onClick="document.getElementById('search-form').submit()">Search</a>									
							</div>
						</fieldset>
					</form>
				</div>
				<div class="row-2">
					<nav>
						<ul class="menu">
						  <li><a class="active" href="index.html">Portal</a></li>
						  <li><a href="news.html">Article</a></li>
						  <li class="last-item"><a href="contacts.html">File Manager</a></li>
						</ul>
					</nav>
				</div>
				<div class="row-3">
					<div class="slider-wrapper">
						<div class="slider">
						  <ul class="items">
							<li><img src="images/slider-img1.jpg" alt="">
								<strong class="banner">
									<strong class="b1">Satu Solid Satu</strong>
									<strong class="b2">HMIF</strong>
									<strong class="b3">Innovation and flexibility, quick and<br> high results - oriented work</strong>
								</strong>
							</li>
							<li><img src="images/slider-img2.jpg" alt="">
								<strong class="banner">
									<strong class="b1">Satu Tujuan Satu</strong>
									<strong class="b2">HMIF</strong>
									<strong class="b3">To conducting business affairs using<br>the highest standards</strong>
								</strong>
							</li>
							<li><img src="images/slider-img3.jpg" alt="">
								<strong class="banner">
									<strong class="b1">Satu Cita Satu</strong>
									<strong class="b2">HMIF</strong>
									<strong class="b3">Success and growth with our<br>professionals of this sphere</strong>
								</strong>
							</li>
						  </ul>
						  <a class="prev" href="#">prev</a>
						  <a class="next" href="#">prev</a>
						</div>
					</div>
				</div>
			</header>
<!-- content --><div class="ic">More Website Templates  at TemplateMonster.com!</div>
			<section id="content">
				<div class="padding">
					
					<div class="wrapper">
						<div class="col-3">
							<div class="indent">
								<h2>Article</h2>
								<p class="color-4 p1">Pemilu HMIF bukan acara biasa nih bung, tapi sebuah acara Revolusi HMIF, mau tau apa aja isi kegiatannya??? makanya dateng di acara nanti tanggal sekian hari sekian, sekian aja ya...</p>
								<div class="wrapper">
									<figure class="img-indent3"><img src="images/page1-img1.png" alt="" /></figure>
									<div class="extra-wrap">
										<div class="indent2">
											Biasanya abis liburan gini enaknya ngapain yaH???? coba cari udara segar sambil melototin pohon ijo yang besar, sambil menghirup udara segar, buang jauh-jauh pikiranmu sejauh pandanganmu ke langit, ada apa sih di tempat nan jauh disana? sebuah alam yang indah tenang.
										</div>
									</div>
								</div>
								<a class="button-2" href="#">Baca Terusss</a>
							</div>
						</div>
						<div class="col-2">
							<div class="block-news">
								<h3 class="color-4 p2">Kalender</h3>
								<div class="wrapper p2">
									<time class="tdate-1 fleft" datetime="2011-05-29"><strong>29</strong>may</time>
									<div class="extra-wrap">
										<h5>Utatse eudui pretium</h5> 
										sodales proin fermen<br>tum condimentum eros quis tincidunt fraesent eleifend tempor nisi, in adipiscing... <a href="#">more</a>
									</div>
								</div>
								<div class="wrapper">
									<time class="tdate-1 fleft" datetime="2011-05-24"><strong>24</strong>may</time>
									<div class="extra-wrap">
										<h5>Felis molestie vitae</h5> 
										Sed massa justo pellen<br>tesque turpis lorem, ornare sit amet vulpate at, consectetur vitae nunc... <a href="#">more</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="box-bg margin-bot">
						<div class="wrapper">
							<div class="col-1">
								<div class="box first">
									<div class="pad">
										<div class="wrapper indent-bot">
											<strong class="numb img-indent2">A</strong>
											<div class="extra-wrap">
												<h3 class="color-1"><strong>WEB</strong>Engineer</h3>
											</div>
										</div>
										<div class="wrapper">
											<a class="button img-indent-r" href="#">>></a>
											<div class="extra-wrap">
												Point.co is one of <a class="link" target="_blank" href="http://blog.templatemonster.com/free-website-templates/ ">free website templates</a> created by TemplateMonster.com.
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-1">
								<div class="box second">
									<div class="pad">
										<div class="wrapper indent-bot">
											<strong class="numb img-indent2">B</strong>
											<div class="extra-wrap">
												<h3 class="color-2"><strong>Mobile</strong>Gadget</h3>
											</div>
										</div>
										<div class="wrapper">
											<a class="button img-indent-r" href="#"></a>
											<div class="extra-wrap">
												This <a class="link" target="_blank" href="http://blog.templatemonster.com/2011/06/13/free-website-template-jquery-slider/ ">Template</a> goes with two packages – with PSD files and without them.
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-2">
								<div class="box third">
									<div class="pad">
										<div class="wrapper indent-bot">
											<strong class="numb img-indent2">C</strong>
											<div class="extra-wrap">
												<h3 class="color-3"><strong>Desktop</strong>Technology</h3>
											</div>
										</div>
										<div class="wrapper">
											<a class="button img-indent-r" href="#">>></a>
											<div class="extra-wrap">
												It has several pages: <a class="link" href="index.html">Home</a>, <a class="link" href="news.html">News</a>, <a class="link" href="services.html">Services</a>, <a class="link" href="products.html">Products</a>, <a class="link" href="contacts.html">Contacts</a>.
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
<!-- footer -->
			<footer>
				<div class="row-top">
					<div class="row-padding">
						<div class="wrapper">
							<div class="col-1">
								<h4>Lokasi:</h4>
								<dl class="address">
									<dd><span>Negara:</span>Indonesia</dd>
									<dd><span>Kota:</span>Bandung kota teduh</dd>
									<dd><span>Alamat:</span>Jalan Ganesha No. 10</dd>
									<dd><span>Email:</span><a href="#">HMIF@mail.com</a></dd>
								</dl>
							</div>
							<div class="col-2">
								<h4>Follow Us:</h4>
								<ul class="list-services">
									<li class="item-1"><a href="#">Facebook</a></li>
									<li class="item-2"><a href="#">Twitter</a></li>
									<li class="item-3"><a href="#">LinkedIn</a></li>
								</ul>
							</div>
							<div class="col-3">
								<h4>Why Us:</h4>
								<ul class="list-1">
									<li><a href="#">Lorem ipsum dolor</a></li>
									<li><a href="#">Aonsect adipisic</a></li>
									<li><a href="#">Eiusmjkod tempor</a></li> 
									<li><a href="#">Incididunt ut labore</a></li>
								</ul>
							</div>
							<div class="col-4">
								<div class="indent3">
									<strong class="footer-logo">HMIF.<strong>co</strong></strong>
									<strong class="phone"><strong></strong> </strong>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row-bot">
					<div class="aligncenter">
						<p class="p0"><a rel="nofollow" href="http://www.templatemonster.com/" target="_blank">Website Template</a> by TemplateMonster.com</p>
						<a href="http://www.templates.com/product/3d-models/" target="_blank">3D Models</a> provided by Templates.com<br>
						<!-- {%FOOTER_LINK} -->
					</div>
				</div>
			</footer>
		</div>
	</div>
	<script type="text/javascript"> Cufon.now(); </script>
	<script type="text/javascript">
		$(function(){
			$('.slider')._TMS({
				prevBu:'.prev',
				nextBu:'.next',
				playBu:'.play',
				duration:800,
				easing:'easeOutQuad',
				preset:'simpleFade',
				pagination:false,
				slideshow:3000,
				numStatus:false,
				pauseOnHover:true,
				banners:true,
				waitBannerAnimation:false,
				bannerShow:function(banner){
					banner
						.hide()
						.fadeIn(500)
				},
				bannerHide:function(banner){
					banner
						.show()
						.fadeOut(500)
				}
			});
		})
	</script>
</body>
</html>
